<template>
    <van-action-sheet v-model="sheetShow" :closeable="false">
        <div class="width-box">
            <div :class="{'checked':i.width===lineWidth}" :style="`border-color:${lineColor} !important;`" class="width-item" v-for="(i,index) in list" :key="i.width" @click="selectWidth(i.width)">
                <img :class="`width-item-image-${index+1}`" :src="i.image">
            </div>
        </div>
    </van-action-sheet>
</template>

<script>
    import { mapGetters } from 'vuex';
    export default {
        props: {
            show: {
                type: Boolean,
                required: true
            }
        },
        data() {
            return {
                list: [
                    { width: 2, image: 'https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/width-1.png' },
                    { width: 4, image: 'https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/width-2.png' },
                    { width: 6, image: 'https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/width-3.png' },
                    { width: 8, image: 'https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/width-4.png' },
                    { width: 10, image: 'https://tqloss.oss-cn-beijing.aliyuncs.com/WebPen/width-5.png' }
                ]
            }
        },
        computed: {
            ...mapGetters(['lineWidth', 'lineColor']),
            sheetShow: {
                get({ show }) { return show },
                set(newVal) { this.$emit('update:show', newVal) }
            }
        },
        methods: {
            //选择颜色 并给父级发送修改颜色
            selectWidth(width) {
                this.$store.commit('setLineWidth', width)
                this.$emit('update:show', false)
            }
        }
    }
</script>

<style lang="less" scoped>
    .checked {
        border: .05rem solid;
    }

    .width-box {
        width: 100%;
        height: 2rem;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .width-item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1rem;
            height: 1rem;
            border-radius: .16rem;
            background-color: #FBFBFC;

            .width-item-image-1 {
                width: .52rem;
                height: .38rem;
            }

            .width-item-image-2 {
                width: .54rem;
                height: .38rem;
            }

            .width-item-image-3 {
                width: .58rem;
                height: .42rem;
            }

            .width-item-image-4 {
                width: .58rem;
                height: .42rem;
            }

            .width-item-image-5 {
                width: .62rem;
                height: .46rem;
            }
        }
    }
</style>